<template>
  <div style="overflow:auto" class="infinite-list-wrapper">
    <!-- 显示更多分类 -->
    <div
      ref="showMoreType"
      :class="{showMoreType:true,onShow:$store.state.mysystem.isShowMoreType,offShow:!$store.state.mysystem.isShowMoreType}"
    >
      <a
        :class="{ active: isActivated == item.typeId }"
        @click="ShowGoodsByType(item.typeId)"
        v-for="item in this.$store.state.mysystem.moreTypeList"
        :key="item"
      >{{item.typeName}}</a>
    </div>

    <el-carousel v-if="$store.state.mysystem.isShowAD" :interval="6000" type="card" height="400px">
      <el-carousel-item v-for="item in $store.state.mysystem.adList" :id="item.id.timestamp" :key="item.id">
        <el-image @click="showAdDetails"  :src="api+item.frontCover" fit="contain" style="height: 100%;width: 100%">
          <div slot="placeholder" class="image-slot">
            加载中
            <span class="dot">...</span>
          </div>
        </el-image>
        <!-- <h3 class="medium">{{ api+item.frontCover }}</h3> -->
      </el-carousel-item>
    </el-carousel>
    <ul
      v-loading="$store.state.mysystem.loading"
      v-infinite-scroll="load"
      infinite-scroll-disabled="disabled"
      class="goods-list"
    >
      <li v-for="goods in userGoodsList" :key="goods.id" @click="handleGoodsDetails(goods.goodsId)">
        <GoodsItem :goods="goods" />
      </li>
    </ul>

    <p v-if="loading">加载中...</p>
    <p v-if="noMore">没有更多了</p>
  </div>
</template>
    
<script>
import GoodsItem from "@/components/GoodsItem";
import {
  listGoods,
  getGoods,
  delGoods,
  addGoods,
  updateGoods
} from "@/api/mysystem/goods";
import { getAdDetailsList } from "../../api/mysystem/ad";

export default {
  name: "GoodsList",
  data() {
    return {
      adList: null,
      api: process.env.VUE_APP_BASE_API,
      url:
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      isActivated: null,
      loading1: false,
      //this.$store.state.mysystem.userGoodsList
      // this.$store.state.mysystem.total
      // userGoodsList: this.$store.state.mysystem.userGoodsList,
      loading: false,
      queryParams: this.$store.state.mysystem.queryParams
      // queryParams: {
      //   pageNum: 1,
      //   pageSize: 10,
      //   typeId: null,
      //   "sysType.typeName": null,
      //   goodsName: null,
      //   goodDescription: null,
      //   goodsPrice: null,
      //   goodsStatus: null,
      //   createBy: null,
      //   createTime: null,
      //   updataBy: null,
      //   updataTime: null,
      //   remark: null
      // }
    };
  },
  computed: {
    noMore() {
      return this.total <= this.queryParams.pageSize * this.queryParams.pageNum;
    },
    disabled() {
      return this.loading || this.noMore;
    },
    userGoodsList() {
      return this.$store.state.mysystem.userGoodsList;
    },
    total() {
      return this.$store.state.mysystem.total;
    }
  },
  created() {
    this.$store.state.mysystem.loading = true;

    this.queryParams.pageNum = 1;
    listGoods(this.queryParams).then(res => {
      this.$store.commit("SET_USERGOODSLIST", res.rows);
      this.$store.commit("SET_TOTAL", res.total);
      this.$store.state.mysystem.loading = false;
    });
    //获取广告列表
    this.getAdList();
  },
  // updated(){
  //   let doc = document.querySelector(".is-active");
  //   doc.addEventListener("click",()=>{
  //     console.log("触发！");
  //   })
  //   console.log("ddfd:",doc);
  // },
  methods: {
    showAdDetails(e){
      console.log("触发~~~");
      let dom = e.target.parentNode.parentNode
      const arr = [...dom.classList];
      console.log(">>>>>>>>>>>",dom.id);
      if(arr.includes("is-active")){
        //如果是中间那个轮播图，就执行进入广告详情界面
        this.$router.push({name:"showAdDetails",query: {id: dom.id}});
      }
      // console.log(">>>>>",arr.includes("is-active"));
    },
    //获取广告列表
    getAdList() {
      getAdDetailsList().then(res => {
        console.log("getAdDetailsList()->res:", res.data);
        this.$store.state.mysystem.adList = res.data;
        // this.adList = res.data;
      });
    },
    ShowGoodsByType(id) {
      if (id != null) {
        this.$store.state.mysystem.isShowAD = false;
      } else {
        this.$store.state.mysystem.isShowAD = true;
      }
      this.isActivated = id;
      this.$store.state.mysystem.loading = true;
      this.queryParams.typeId = id;
      this.queryParams.pageNum = 1;
      listGoods(this.queryParams).then(res => {
        console.log("reslist=>", res);
        this.$store.commit("SET_USERGOODSLIST", res.rows);
        this.$store.commit("SET_TOTAL", res.total);
        this.$store.state.mysystem.loading = false;
      });
    },
    //查看商品详情
    handleGoodsDetails(goodsId) {
      // this.$router.push("/main/goodsDetails");
      this.$router.push({
        path: "/main/goodsDetails",
        query: { goodsId: goodsId }
      });
    },
    //加载更多
    load() {
      console.log("加载");
      this.loading = true;
      setTimeout(() => {
        this.queryParams.pageNum++;
        // this.$store.commit("SET_QUERYPARAMS", this.queryParams);
        listGoods(this.queryParams).then(res => {
          this.$store.commit("SET_USERGOODSLIST", [
            ...this.userGoodsList,
            ...res.rows
          ]);
          this.loading = false;
        });
      }, 1000);
    }
  },
  components: {
    GoodsItem
  }
};
</script>
    
<style scoped lang="scss">
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #f5f1f1;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #ffffff;
}
.active {
  color: rgb(133, 133, 255);
  border-bottom: 1px solid rgb(133, 133, 255);
}
.infinite-list-wrapper {
  height: 82vh;
  .showMoreType {
    background-color: #f1eded;
    height: 0px;
    transition: all 0.5s;
    display: flex;
    padding: 0px 20px;
    overflow: auto;
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 99;
    a {
      margin: 10px 10px;
      height: 30px;
    }
  }
  .onShow {
    height: 200px;
    // visibility: visible;
  }
  .offShow {
    height: 0px;
  }

  p {
    text-align: center;
    color: #999;
  }
}
.goods-list {
  display: flex;
  justify-content: space-evenly;
  // height: 382px;
  list-style: none;
  flex-wrap: wrap;
  padding: 0px;
  transition: all 0.3s;
  li {
    width: 230px;
    // height: 406px;
    margin: 16px 0px;
    transition: all 0.5s;

    // &:hover {
    //   transform: translate3d(0, -3px, 0);
    //   box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    // }

    img {
      width: 306px;
      height: 306px;
    }

    p {
      font-size: 22px;
      padding-top: 12px;
      text-align: center;
    }

    .desc {
      color: #999;
      font-size: 18px;
    }
  }
}
</style>
    
    